<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随手工具箱 - 图床与文件上传工具</title>
    <style>
        :root { --primary: #4361ee; }
        body { 
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; 
            max-width: 800px; 
            margin: 0 auto; 
            padding: 2rem; 
            display: flex;
            flex-direction: column;
            min-height: 90vh;
        }
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        .back-btn {
            text-decoration: none;
            color: var(--primary);
            display: flex;
            align-items: center;
            margin-right: 1rem;
            font-size: 1.2rem;
        }
        .content {
            flex: 1;
        }
        .upload-area { 
            border: 2px dashed var(--primary); 
            border-radius: 8px;
            padding: 3rem; 
            text-align: center; 
            margin: 2rem 0;
            transition: all 0.3s;
        }
        .upload-area:hover { background: #f8f9fa; }
        #imageInput, #fileInput { display: none; }
        .upload-btn {
            background: var(--primary);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            margin: 0 5px;
        }
        #preview { max-width: 100%; margin-top: 1rem; }
        #result { 
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            word-break: break-all;
        }
        .url-box {
            display: flex;
            margin-top: 1rem;
        }
        .url-box input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        .url-box button {
            padding: 0.5rem 1rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        .loading {
            display: none;
            margin: 1rem auto;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .footer {
            margin-top: 2rem;
            font-size: 12px;
            color: #666;
            padding: 10px;
            text-align: center;
        }
        .footer a {
            color: #666;
            text-decoration: none;
        }
        .tabs {
            display: flex;
            margin-bottom: 1rem;
            border-bottom: 1px solid #ddd;
        }
        .tab {
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            border: none;
            background: none;
            font-size: 1rem;
            position: relative;
        }
        .tab.active {
            color: var(--primary);
            font-weight: bold;
        }
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary);
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .file-info {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1rem;
            flex-direction: column;
        }
        .file-icon {
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="/" class="back-btn">← 返回</a>
        <h1>上传工具</h1>
    </div>
    
    <div class="tabs">
        <button class="tab active" data-tab="image-tab">图片上传</button>
        <button class="tab" data-tab="file-tab">文件上传</button>
    </div>
    
    <div class="content">
        <!-- 图片上传标签页 -->
        <div class="tab-content active" id="image-tab">
            <p>上传图片获取可直接引用的HTTPS链接 (最大100MB)</p>
            <div class="upload-area" id="imageDropArea">
                <input type="file" id="imageInput" accept="image/*">
                <p>点击或拖拽图片到此处上传</p>
                <button class="upload-btn" onclick="document.getElementById('imageInput').click()">选择图片</button>
                <div id="imagePreview"></div>
                <div class="loading" id="imageLoadingSpinner"></div>
            </div>
            <div id="imageResult"></div>
        </div>
        
        <!-- 文件上传标签页 -->
        <div class="tab-content" id="file-tab">
            <p>上传任意文件获取HTTPS链接 (最大100MB)</p>
            <div class="upload-area" id="fileDropArea">
                <input type="file" id="fileInput">
                <p>点击或拖拽文件到此处上传</p>
                <button class="upload-btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
                <div id="fileInfo" class="file-info"></div>
                <div class="loading" id="fileLoadingSpinner"></div>
            </div>
            <div id="fileResult"></div>
        </div>
    </div>

    <div class="footer">
        服务备案号：<a href="https://beian.miit.gov.cn" target="_blank">津ICP备2025033698号-1</a>
        <p style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <a href="https://beian.mps.gov.cn" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #666;">
                <img src="https://beian.mps.gov.cn/web/assets/logo01.6189a29f.png" alt="公安联网备案图标" style="height: 18px; margin-right: 5px;">
                津公网安备12010402002269号
            </a>
        </p>
    </div>

    <script>
        // 标签页切换逻辑
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有活动状态
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                
                // 添加当前活动状态
                tab.classList.add('active');
                document.getElementById(tab.dataset.tab).classList.add('active');
            });
        });
        
        // 图片上传功能
        const imageDropArea = document.getElementById('imageDropArea');
        const imageInput = document.getElementById('imageInput');
        const imageLoadingSpinner = document.getElementById('imageLoadingSpinner');

        imageDropArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            imageDropArea.style.background = '#f1f3f5';
        });
        
        imageDropArea.addEventListener('dragleave', () => {
            imageDropArea.style.background = '';
        });
        
        imageDropArea.addEventListener('drop', (e) => {
            e.preventDefault();
            imageDropArea.style.background = '';
            if(e.dataTransfer.files.length) {
                const file = e.dataTransfer.files[0];
                // 检查文件大小，限制为100MB
                const maxFileSize = 100 * 1024 * 1024; // 100MB
                if (file.size > maxFileSize) {
                    const resultDiv = document.getElementById('imageResult');
                    resultDiv.innerHTML = `
                        <div style="color: red; padding: 1rem; background: #fff5f5; border-radius: 4px;">
                            <h3>✗ 上传失败</h3>
                            <p>文件过大！最大允许上传100MB的图片。</p>
                            <p>当前文件大小: ${(file.size/1024/1024).toFixed(2)} MB</p>
                        </div>
                    `;
                    imageInput.files = e.dataTransfer.files;
                    showImagePreview(file);
                    return;
                }
                imageInput.files = e.dataTransfer.files;
                handleImageSelection();
            }
        });

        imageInput.addEventListener('change', handleImageSelection);

        function handleImageSelection() {
            const file = imageInput.files[0];
            if (!file) return;

            // 检查文件大小，限制为100MB
            const maxFileSize = 100 * 1024 * 1024; // 100MB
            if (file.size > maxFileSize) {
                const resultDiv = document.getElementById('imageResult');
                resultDiv.innerHTML = `
                    <div style="color: red; padding: 1rem; background: #fff5f5; border-radius: 4px;">
                        <h3>✗ 上传失败</h3>
                        <p>文件过大！最大允许上传100MB的图片。</p>
                        <p>当前文件大小: ${(file.size/1024/1024).toFixed(2)} MB</p>
                    </div>
                `;
                // 显示预览
                showImagePreview(file);
                return;
            }

            // 显示预览
            showImagePreview(file);
            
            // 上传文件
            uploadImage(file);
        }

        function showImagePreview(file) {
            const preview = document.getElementById('imagePreview');
            preview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="预览" style="max-height: 200px;">`;
        }

        function uploadImage(file) {
            // 显示加载动画
            imageLoadingSpinner.style.display = 'block';
            
            const formData = new FormData();
            formData.append('file', file);

            fetch('/upload_image', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.detail || '上传失败'); });
                }
                return response.json();
            })
            .then(data => {
                // 隐藏加载动画
                imageLoadingSpinner.style.display = 'none';
                
                const resultDiv = document.getElementById('imageResult');
                resultDiv.innerHTML = `
                    <h3>✓ 上传成功</h3>
                    <p>文件名: ${data.filename}</p>
                    <p>大小: ${(data.size/1024).toFixed(2)} KB</p>
                    <div class="url-box">
                        <input type="text" id="imageUrlInput" value="${data.url}" readonly>
                        <button onclick="copyUrl('imageUrlInput')">复制</button>
                    </div>
                    <div style="margin-top: 1rem;">
                        <img src="${data.url}" style="max-height: 150px; border: 1px solid #ddd;">
                    </div>
                `;
            })
            .catch(error => {
                // 隐藏加载动画
                imageLoadingSpinner.style.display = 'none';
                
                const resultDiv = document.getElementById('imageResult');
                resultDiv.innerHTML = `
                    <div style="color: red; padding: 1rem; background: #fff5f5; border-radius: 4px;">
                        <h3>✗ 上传失败</h3>
                        <p>${error.message}</p>
                    </div>
                `;
            });
        }

        // 文件上传功能
        const fileDropArea = document.getElementById('fileDropArea');
        const fileInput = document.getElementById('fileInput');
        const fileLoadingSpinner = document.getElementById('fileLoadingSpinner');

        fileDropArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            fileDropArea.style.background = '#f1f3f5';
        });
        
        fileDropArea.addEventListener('dragleave', () => {
            fileDropArea.style.background = '';
        });
        
        fileDropArea.addEventListener('drop', (e) => {
            e.preventDefault();
            fileDropArea.style.background = '';
            if(e.dataTransfer.files.length) {
                const file = e.dataTransfer.files[0];
                // 检查文件大小，限制为100MB
                const maxFileSize = 100 * 1024 * 1024; // 100MB
                if (file.size > maxFileSize) {
                    const resultDiv = document.getElementById('fileResult');
                    resultDiv.innerHTML = `
                        <div style="color: red; padding: 1rem; background: #fff5f5; border-radius: 4px;">
                            <h3>✗ 上传失败</h3>
                            <p>文件过大！最大允许上传100MB的文件。</p>
                            <p>当前文件大小: ${(file.size/1024/1024).toFixed(2)} MB</p>
                        </div>
                    `;
                    fileInput.files = e.dataTransfer.files;
                    showFileInfo(file);
                    return;
                }
                fileInput.files = e.dataTransfer.files;
                handleFileSelection();
            }
        });

        fileInput.addEventListener('change', handleFileSelection);

        function handleFileSelection() {
            const file = fileInput.files[0];
            if (!file) return;

            // 检查文件大小，限制为100MB
            const maxFileSize = 100 * 1024 * 1024; // 100MB
            if (file.size > maxFileSize) {
                const resultDiv = document.getElementById('fileResult');
                resultDiv.innerHTML = `
                    <div style="color: red; padding: 1rem; background: #fff5f5; border-radius: 4px;">
                        <h3>✗ 上传失败</h3>
                        <p>文件过大！最大允许上传100MB的文件。</p>
                        <p>当前文件大小: ${(file.size/1024/1024).toFixed(2)} MB</p>
                    </div>
                `;
                // 显示文件信息
                showFileInfo(file);
                return;
            }

            // 显示文件信息
            showFileInfo(file);
            
            // 上传文件
            uploadFile(file);
        }

        function showFileInfo(file) {
            const fileInfo = document.getElementById('fileInfo');
            const fileIcon = getFileIcon(file.name);
            
            fileInfo.innerHTML = `
                <div class="file-icon">${fileIcon}</div>
                <div>${file.name}</div>
                <div>${(file.size/1024/1024).toFixed(2)} MB</div>
            `;
        }
        
        function getFileIcon(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            switch(ext) {
                case 'pdf': return '📄';
                case 'doc':
                case 'docx': return '📝';
                case 'xls':
                case 'xlsx': return '📊';
                case 'ppt':
                case 'pptx': return '📑';
                case 'zip':
                case 'rar':
                case '7z': return '📦';
                case 'mp3':
                case 'wav': return '🎵';
                case 'mp4':
                case 'avi':
                case 'mov': return '🎬';
                default: return '📄';
            }
        }

        function uploadFile(file) {
            // 显示加载动画
            fileLoadingSpinner.style.display = 'block';
            
            const formData = new FormData();
            formData.append('file', file);

            fetch('/upload_file', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.detail || '上传失败'); });
                }
                return response.json();
            })
            .then(data => {
                // 隐藏加载动画
                fileLoadingSpinner.style.display = 'none';
                
                const resultDiv = document.getElementById('fileResult');
                resultDiv.innerHTML = `
                    <h3>✓ 上传成功</h3>
                    <p>原始文件名: ${data.original_filename || data.filename}</p>
                    <p>大小: ${(data.size/1024/1024).toFixed(2)} MB</p>
                    <div class="url-box">
                        <input type="text" id="fileUrlInput" value="${data.url}" readonly>
                        <button onclick="copyUrl('fileUrlInput')">复制</button>
                    </div>
                `;
            })
            .catch(error => {
                // 隐藏加载动画
                fileLoadingSpinner.style.display = 'none';
                
                const resultDiv = document.getElementById('fileResult');
                resultDiv.innerHTML = `
                    <div style="color: red; padding: 1rem; background: #fff5f5; border-radius: 4px;">
                        <h3>✗ 上传失败</h3>
                        <p>${error.message}</p>
                    </div>
                `;
            });
        }

        function copyUrl(inputId) {
            const urlInput = document.getElementById(inputId);
            urlInput.select();
            document.execCommand('copy');
            
            // 创建非阻塞式通知
            const notification = document.createElement("div");
            notification.style.position = "fixed";
            notification.style.bottom = "50px";
            notification.style.left = "50%";
            notification.style.transform = "translateX(-50%)";
            notification.style.padding = "10px 20px";
            notification.style.backgroundColor = "#4361ee";
            notification.style.color = "white";
            notification.style.borderRadius = "4px";
            notification.style.zIndex = "1000";
            notification.textContent = "链接已复制！";
            document.body.appendChild(notification);
            
            // 通知自动消失
            setTimeout(() => {
                notification.style.opacity = "0";
                notification.style.transition = "opacity 0.5s";
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 500);
            }, 2000);
        }
    </script>
</body>
</html>
